<template>
  <div class="app-container billsFlow">

    <IntroduceTip :value="1"></IntroduceTip>

    <div class="custom_card">
      <Tabs
        :list="tabs_list1"
        :column="7"
        :minWidth="200"
        :active="queryParams.flowType"
        @tabs_click="flowTypeChange"
        calss="menuTabs"
      ></Tabs>
    </div>
    <div class="custom_card_0">
      <MenuTabs
        v-if="queryParams.flowType == 1"
        key="MenuTabs1"
        :list="tabs_list2"
        name="业务类型"
        :labelWidth="100"
        :active="queryParams.bizType"
        @tabs_click="bizTypeChange"
      ></MenuTabs>
      <MenuTabs
        key="MenuTabs2"
        v-if="queryParams.flowType == 2"
        :list="tabs_list3"
        name="业务类型"
        :labelWidth="100"
        :active="queryParams.bizType"
        @tabs_click="bizTypeChange"
      ></MenuTabs>
    </div>
    <div class="custom_card_0" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
        style="margin-top: 10px"
      >
        <el-form-item label="订单编号" prop="bizNo" v-if="bizNoFlag">
          <el-input
            v-model="queryParams.bizNo"
            placeholder="请输入订单编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="客户名称" prop="memberName" v-if="memberNameFlag">
          <el-input
            v-model="queryParams.memberName"
            placeholder="请输入客户名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="支付方式" prop="payWay" v-if="payWayFlag">
          <el-select
            v-model="queryParams.payWay"
            placeholder="请选择支付方式"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.sys_pay_way"
              v-if="parseInt(dict.value) != 5"
              :key="parseInt(dict.value)"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="经办人" prop="createBy" v-if="createByFlag">
          <el-select
            v-model="queryParams.createBy"
            placeholder="请选择经办人"
            clearable
            size="small"
          >
            <el-option
              v-for="user in sysUserList"
              :key="parseInt(user.userId)"
              :label="user.userName"
              :value="parseInt(user.userId)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号" prop="carNo" v-if="carNoFlag">
          <el-input
            v-model="queryParams.carNo"
            placeholder="请输入车牌号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item :label="queryLabel" prop="time" v-if="timeFlag">
          <el-date-picker
            clearable
            size="small"
            v-model="queryParams.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择处置时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="处置类型"
          prop="manageReason"
          v-if="manageReasonFlag"
        >
          <el-select
            v-model="queryParams.manageReason"
            placeholder="请选择处置类型"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.reason_for_disposal"
              :key="parseInt(dict.value)"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="同行名称" prop="sameJobId" v-if="jobNameFlag">
          <el-select
            v-model="queryParams.sameJobId"
            placeholder="请选择经办人"
            clearable
            size="small"
          >
            <el-option
              v-for="sameJob in sameJobList"
              :key="parseInt(sameJob.id)"
              :label="sameJob.name"
              :value="parseInt(sameJob.id)"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="报销事项"
          prop="reimbursementMatter"
          v-if="reimbursementMatterFlag"
        >
          <el-select
            v-model="queryParams.reimbursementMatter"
            placeholder="请选择成本类型"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.reimbursement_matter"
              :key="parseInt(dict.value)"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="成本类型"
          prop="reimbursementType"
          v-if="reimbursementTypeFlag"
        >
          <el-select
            v-model="queryParams.reimbursementType"
            placeholder="请选择成本类型"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.reimbursement_type"
              v-if="dict.value != 5 && dict.value != 6"
              :key="parseInt(dict.value)"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="订单来源"
          prop="orderSource"
          v-if="orderSourceFlag"
        >
          <el-select
            v-model="queryParams.orderSource"
            placeholder="请选择订单来源"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.sys_order_source"
              :key="parseInt(dict.value)"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="账单类型"
          prop="receiveType"
          v-if="bizNoFlag && queryParams.bizType!=9"
        >
          <el-select
            v-model="queryParams.receiveType"
            placeholder="请选择应付类型"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.receive_type"
              v-if="filterDict(parseInt(dict.value))"
              :key="parseInt(dict.value)"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入账时间" prop="billTime">
          <el-date-picker
            clearable
            size="small"
            v-model="queryParams.billTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择入账时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
          >导出
          </el-button>

        </el-form-item>
        <el-form-item>
          <el-tooltip placement="top" effect="dark">
            <div slot="content" style="font-size: 16px">
              订单、车辆借调、车辆管理、其他成本产生的实际收入及支出流水整合
            </div>
            <el-button type="text">功能说明&nbsp;<i class="el-icon-warning-outline"></i></el-button>
          </el-tooltip>
        </el-form-item>

      </el-form>
    </div>
    <div class="custom_card">
      <!--      <span style="color: #2251c5">合计:{{billTotal}}元</span>-->
      <!--日租订单支付入账流水 -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 1"
        border
      >
        <el-table-column
          label="订单编号"
          align="center"
          prop="orderNo"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="入账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="客户名称"
          align="center"
          prop="memberName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="订单来源"
          align="center"
          prop="orderSource"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_order_source"
              :value="scope.row.orderSource"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="入账金额"
          align="center"
          prop="amount"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="支付方式"
          align="center"
          prop="payWay"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_pay_way"
              :value="scope.row.payWay"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="支付流水号"
          align="center"
          prop="flowNo"
          min-width="160"
          show-overflow-tooltip
        />
      </el-table>

      <!--车辆处置入账流水 -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 2"
        border
      >
        <el-table-column
          label="处置时间"
          align="center"
          prop="manageTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="入账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="处置类型"
          align="center"
          prop="manageReason"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.reason_for_disposal"
              :value="scope.row.manageReason"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="车牌号"
          align="center"
          prop="carNo"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="归属门店"
          align="center"
          prop="belongingStoreName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="入账金额"
          align="center"
          prop="amount"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="userName"
          min-width="140"
          show-overflow-tooltip
        />
      </el-table>

      <!--借出车辆入账流水 -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 3"
        border
      >
        <el-table-column
          label="同行名称"
          align="center"
          prop="sameJobName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="借调日期"
          align="center"
          prop="startTime"
          min-width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.startTime }} 至
            {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="借出车牌号"
          align="center"
          prop="carNo"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="入账金额"
          align="center"
          prop="amount"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="同行付款方式"
          align="center"
          prop="settlementWay"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.settlement_way"
              :value="scope.row.settlementWay"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="付款时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="sysUserName"
          min-width="120"
          show-overflow-tooltip
        />
      </el-table>

      <!--月租订单支付入账流水 -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 13"
        border
      >
        <el-table-column
          label="订单编号"
          align="center"
          prop="orderNo"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="入账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="客户名称"
          align="center"
          prop="memberName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="订单来源"
          align="center"
          prop="orderSource"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_order_source"
              :value="scope.row.orderSource"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="入账金额"
          align="center"
          prop="amount"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="支付方式"
          align="center"
          prop="payWay"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_pay_way"
              :value="scope.row.payWay"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="支付流水号"
          align="center"
          prop="flowNo"
          min-width="160"
          show-overflow-tooltip
        />
      </el-table>

      <!--车辆维修支出流水 -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 4"
        border
      >
        <el-table-column
          label="维修时间"
          align="center"
          prop="repairStartDate"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="出账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="送车时间"
          align="center"
          prop="repairStartDate"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="取车时间"
          align="center"
          prop="repairEndDate"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="修理厂"
          align="center"
          prop="serviceName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="车牌号"
          align="center"
          prop="carPlateNo"
          min-width="140"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="归属门店"
          align="center"
          prop="belongingStoreName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="userName"
          min-width="140"
          show-overflow-tooltip
        />
      </el-table>

      <!--车辆保养支出流水 -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 5"
        border
      >
        <el-table-column
          label="保养时间"
          align="center"
          prop="repairStartDate"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="出账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="送车时间"
          align="center"
          prop="repairStartDate"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="取车时间"
          align="center"
          prop="repairEndDate"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="修理厂"
          align="center"
          prop="serviceName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="车牌号"
          align="center"
          prop="carPlateNo"
          min-width="140"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="归属门店"
          align="center"
          prop="belongingStoreName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="userName"
          min-width="140"
          show-overflow-tooltip
        />
      </el-table>

      <!--车辆保险支出流水 -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 6"
        border
      >
        <el-table-column
          label="续保时间"
          align="center"
          prop="createTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="出账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="保险开始日期"
          align="center"
          prop="compulsoryStartTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="保险到期日期"
          align="center"
          prop="compulsoryEndTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="保险公司"
          align="center"
          prop="compulsoryCompany"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="车牌号"
          align="center"
          prop="carNo"
          min-width="140"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="归属门店"
          align="center"
          prop="belongingStoreName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="保险类型"
          align="center"
          prop="insuranceType"
          min-width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.insuranceType == 1 ? '商业险' : '交强险' }}
          </template>
        </el-table-column>
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="userName"
          min-width="100"
          show-overflow-tooltip
        />
      </el-table>

      <!--车辆年检支出流水 -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 7"
        border
      >
        <!--        <el-table-column
                  label="年检时间"
                  align="center"
                  prop="createTime"
                  min-width="160"
                  show-overflow-tooltip
                />-->
        <el-table-column
          label="出账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="年检日期"
          align="center"
          prop="thisTimeInspectionTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="下次年检日期"
          align="center"
          prop="nextInspectionTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column label="车牌号" align="center" prop="carNo"/>
        <el-table-column
          label="归属门店"
          align="center"
          prop="belongingStoreName"
          min-width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
      </el-table>

      <!--车辆违章支出流水 -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 8"
        border
      >
        <el-table-column
          label="处理时间"
          align="center"
          prop="updateTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="出账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="违章时间"
          align="center"
          prop="illegalTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="车牌号"
          align="center"
          prop="carNo"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="归属门店"
          align="center"
          prop="belongingStoreName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="违章扣分"
          align="center"
          prop="pointsDeduction"
          min-width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="违章地点"
          align="center"
          prop="illegalLocation"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="userName"
          min-width="120"
          show-overflow-tooltip
        />
      </el-table>

      <!--车辆借入支出流水 -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 9"
        border
      >
        <el-table-column
          label="借调时间"
          align="center"
          prop="startTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="出账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="借调日期"
          align="center"
          prop="startTime"
          min-width="180"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.startTime }}
            至
            {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="车牌号"
          align="center"
          prop="carNo"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="归属门店"
          align="center"
          prop="takeStoreName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="订单编号"
          align="center"
          prop="orderNo"
          min-width="160"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="同行名称"
          align="center"
          prop="sameJobName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="付款方式"
          align="center"
          prop="settlementWay"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.settlement_way"
              :value="scope.row.settlementWay"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="sysUserName"
          min-width="120"
          show-overflow-tooltip
        />
      </el-table>

      <!--车款分期支出流水  -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 10"
        border
      >
        <el-table-column
          label="付款日期"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="账单时间"
          align="center"
          prop="payableTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column label="车辆来源" align="center" prop="source">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.vehicle_source"
              :value="scope.row.source"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="合同日期"
          align="center"
          prop="startTime"
          min-width="160"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.startTime }} 至 {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="供应商"
          align="center"
          prop="supplierName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="车牌号"
          align="center"
          prop="carNo"
          min-width="140"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="归属门店"
          align="center"
          prop="belongingStoreName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            ¥{{ scope.row.amount }}/{{ scope.row.remark || '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="userName"
          min-width="120"
          show-overflow-tooltip
        />
      </el-table>

      <!--费用报销支出流水  -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 11"
        border
      >
        <el-table-column
          label="报销日期"
          align="center"
          prop="reimbursementTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="出账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="报销事项"
          align="center"
          prop="reimbursementMatter"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.reimbursement_matter"
              :value="scope.row.reimbursementMatter"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="userName"
          min-width="120"
          show-overflow-tooltip
        />
      </el-table>

      <!--油卡充值支出流水  -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 12"
        border
      >
        <el-table-column
          label="充值日期"
          align="center"
          prop="reimbursementTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="出账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="充值卡号"
          align="center"
          prop="cardNo"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="userName"
          min-width="120"
          show-overflow-tooltip
        />
      </el-table>

      <!--其他费用支出流水   -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 16"
        border
      >
        <el-table-column
          label="支出时间"
          align="center"
          prop="reimbursementTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="出账时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="支出类型"
          align="center"
          prop="reimbursementType"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.reimbursement_type"
              :value="scope.row.reimbursementType"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="userName"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
          min-width="120"
          show-overflow-tooltip
        />
      </el-table>

      <!--日租订单退款  -->
      <el-table
        v-loading="loading"
        :data="flowList"
        v-if="queryParams.bizType == 14 || queryParams.bizType == 15"
        border
      >
        <el-table-column
          label="退款时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="出账时间"
          align="center"
          prop="refundTime"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="退款类型"
          align="center"
          prop="type"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.receive_type"
              :value="scope.row.type"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="客户名称"
          align="center"
          prop="memberName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="订单编号"
          align="center"
          prop="orderNo"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="订单来源"
          align="center"
          prop="orderSource"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_order_source"
              :value="scope.row.orderSource"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="支付方式"
          align="center"
          prop="payWay"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_pay_way"
              :value="scope.row.payWay"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="支付流水号"
          align="center"
          prop="flowNo"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="支出金额"
          align="center"
          prop="amount"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> ¥{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column
          label="经办人"
          align="center"
          prop="userName"
          min-width="120"
          show-overflow-tooltip
        />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import {listFlow, billFlowCount, billFlowCount1, exportFlow} from '@/api/bills/flow'
import {userlist} from '@/api/system/user'
import {jobList} from '@/api/seconded/job'

import Tabs from '@/components/custom/tabs.vue'
import MenuTabs from '@/components/custom/menuTabs.vue'

export default {
  name: 'Flow',
  dicts: [
    'sys_pay_way',
    'reason_for_disposal',
    'reimbursement_matter',
    'reimbursement_type',
    'sys_order_source',
    'settlement_way',
    'receive_type',
    'vehicle_source',
  ],
  data() {
    return {
      showTip:true,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      longFlag: false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      bizNoFlag: false,
      bizNoArray: [1, 9, 13, 14, 15],
      memberNameFlag: false,
      memberNameArrray: [1, 13, 14, 15],
      payWayFlag: false,
      payWayArrray: [1, 13, 14, 15],
      createByFlag: false,
      createByArrray: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 16],
      carNoFlag: false,
      carNoArrray: [2, 3, 4, 5, 6, 7, 8, 9, 10],
      timeFlag: false,
      timeArrray: [2, 4, 5, 6, 7, 8, 16],
      manageReasonFlag: false,
      manageReasonArrray: [2],
      jobNameFlag: false,
      jobNameArrray: [3, 9],
      reimbursementMatterFlag: false,
      reimbursementMatterArrray: [11],
      reimbursementTypeFlag: false,
      reimbursementTypeArrray: [16],
      orderSourceFlag: false,
      orderSourceArrray: [14, 15],
      // 总条数
      total: 0,
      queryLabel: null,
      // 业务入账/出账流水表格数据
      flowList: [],
      sysUserList: [],
      sameJobList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        flowType: 1,
        bizNo: null,
        bizType: 1,
        flowNo: null,
        amount: null,
        payTime: null,
        payWay: null,
        memberName: null,
        manageReason: null,
        createBy: null,
        time: '',
        billTime: '',
        carNo: null,
        startTime: null,
        endTime: null,
        orderSource: null,
        reimbursementType: null,
        reimbursementMatter: null,
        sameJobId: null,
        receiveType: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      tabs_list1: [
        {key: '1', name: '入账流水', number: '0条', count: 0},
        {key: '2', name: '支出流水', number: '0条', count: 0},
      ],
      tabs_list2: [
        {key: '1', name: '日租订单', number: '0条', count: 0},
        {key: '2', name: '车辆处置', number: '0条', count: 0},
        {key: '3', name: '借出车辆', number: '0条', count: 0},
        {key: '13', name: '月租订单', number: '0条', count: 0},
      ],
      tabs_list3: [
        {key: '14', name: '日租退款', number: '0条', count: 0},
        {key: '4', name: '维修支出', number: '0条', count: 0},
        {key: '5', name: '保养支出', number: '0条', count: 0},
        {key: '6', name: '保险支出', number: '0条', count: 0},
        {key: '7', name: '年检支出', number: '0条', count: 0},
        {key: '8', name: '违章支出', number: '0条', count: 0},
        {key: '9', name: '车辆借入', number: '0条', count: 0},
        {key: '10', name: '车款分期', number: '0条', count: 0},
        {key: '11', name: '费用报销', number: '0条', count: 0},
        {key: '12', name: '油卡充值', number: '0条', count: 0},
        {key: '16', name: '其他费用', number: '0条', count: 0},
        {key: '15', name: '月租退款', number: '0条', count: 0},
      ],
      billTotal: 0,
      /*flowCount1:{
        count0:0,
        count00:0,
        count1:0,
        count2:0,
        count3:0,
        count4:0,
        count5:0,
        count6:0,
        count7:0,
        count8:0,
        count9:0,
        count10:0,
        count11:0,
        count12:0,
        count13:0,
        count14:0,
        count15:0,
        count16:0,
        num0:0,
        num00:0,
        num1:0,
        num2:0,
        num3:0,
        num4:0,
        num5:0,
        num6:0,
        num7:0,
        num8:0,
        num9:0,
        num10:0,
        num11:0,
        num12:0,
        num13:0,
        num14:0,
        num15:0,
        num16:0
      },*/
    }
  },
  components: {
    Tabs,
    MenuTabs,
  },
  created() {
    this.getList()
    this.getUserList()
    this.getSameJobList()
    this.flowTypeChange(1)
  },
  methods: {
    closeTip(){
      this.showTip = false;
    },
    getBillFlowCount1() {
      billFlowCount1(this.queryParams).then((response) => {
        let flowCount1 = response.data
        if (this.queryParams.flowType == 1) {
          this.tabs_list2.forEach(i => {
            if (parseInt(i.key) == parseInt(this.queryParams.bizType)) {
              switch (parseInt(this.queryParams.bizType)) {
                case 1:
                  i.count = '￥' + response.data.num1
                  break;
                case 2:
                  i.count = '￥' + response.data.num2
                  break;
                case 3:
                  i.count = '￥' + response.data.num3
                  break;
                case 13:
                  i.count = '￥' + response.data.num13
                  break;
              }
            }
          })
        }
        if (this.queryParams.flowType == 2) {
          this.tabs_list3.forEach(i => {
            if (parseInt(i.key) == parseInt(this.queryParams.bizType)) {
              switch (parseInt(this.queryParams.bizType)) {
                case 4:
                  i.count = '￥' + response.data.num4
                  break;
                case 5:
                  i.count = '￥' + response.data.num5
                  break;
                case 6:
                  i.count = '￥' + response.data.num6
                  break;
                case 7:
                  i.count = '￥' + response.data.num7
                  break;
                case 8:
                  i.count = '￥' + response.data.num8
                  break;
                case 9:
                  i.count = '￥' + response.data.num9
                  break;
                case 10:
                  i.count = '￥' + response.data.num10
                  break;
                case 11:
                  i.count = '￥' + response.data.num11
                  break;
                case 12:
                  i.count = '￥' + response.data.num12
                  break;
                case 14:
                  i.count = '￥' + response.data.num14
                  break;
                case 15:
                  i.count = '￥' + response.data.num15
                  break;
                case 16:
                  i.count = '￥' + response.data.num16
                  break;
              }
            }
          })
        }
      })
    },
    getBillFlowCount() {
      billFlowCount(this.queryParams).then((response) => {
        let flowCount = response.data
        this.tabs_list1 = [
          {
            key: '1',
            name: '入账流水',
            number: flowCount.count0 + '条',
            count: '￥' + flowCount.num0,
          },
          {
            key: '2',
            name: '支出流水',
            number: flowCount.count00 + '条',
            count: '￥' + flowCount.num00,
          },
        ]
        this.tabs_list2 = [
          {
            key: '1',
            name: '日租订单',
            number: flowCount.count1 + '条',
            count: '￥' + flowCount.num1,
          },
          {
            key: '2',
            name: '车辆处置',
            number: flowCount.count2 + '条',
            count: '￥' + flowCount.num2,
          },
          {
            key: '3',
            name: '借出车辆',
            number: flowCount.count3 + '条',
            count: '￥' + flowCount.num3,
          },
          {
            key: '13',
            name: '月租订单',
            number: flowCount.count13 + '条',
            count: '￥' + flowCount.num13,
          },
        ]
        this.tabs_list3 = [
          {
            key: '14',
            name: '日租退款',
            number: flowCount.count14 + '条',
            count: '￥' + flowCount.num14,
          },
          {
            key: '4',
            name: '维修支出',
            number: flowCount.count4 + '条',
            count: '￥' + flowCount.num4,
          },
          {
            key: '5',
            name: '保养支出',
            number: flowCount.count5 + '条',
            count: '￥' + flowCount.num5,
          },
          {
            key: '6',
            name: '保险支出',
            number: flowCount.count6 + '条',
            count: '￥' + flowCount.num6,
          },
          {
            key: '7',
            name: '年检支出',
            number: flowCount.count7 + '条',
            count: '￥' + flowCount.num7,
          },
          {
            key: '8',
            name: '违章支出',
            number: flowCount.count8 + '条',
            count: '￥' + flowCount.num8,
          },
          {
            key: '9',
            name: '车辆借入',
            number: flowCount.count9 + '条',
            count: '￥' + flowCount.num9,
          },
          {
            key: '10',
            name: '车款分期',
            number: flowCount.count10 + '条',
            count: '￥' + flowCount.num10,
          },
          {
            key: '11',
            name: '费用报销',
            number: flowCount.count11 + '条',
            count: '￥' + flowCount.num11,
          },
          {
            key: '12',
            name: '油卡充值',
            number: flowCount.count12 + '条',
            count: '￥' + flowCount.num12,
          },
          {
            key: '16',
            name: '其他费用',
            number: flowCount.count16 + '条',
            count: '￥' + flowCount.num16,
          },

          {
            key: '15',
            name: '月租退款',
            number: flowCount.count15 + '条',
            count: '￥' + flowCount.num15,
          },
        ]
        this.getBillFlowCount1();
      })
    },
    getSameJobList() {
      jobList({}).then((response) => {
        this.sameJobList = response.data
      })
    },
    getUserList() {
      userlist({}).then((response) => {
        this.sysUserList = response.data
      })
    },
    flowTypeChange(val) {
      this.queryParams.flowType = val
      if (val == 1) {
        this.queryParams.bizType = 1
        this.bizTypeChange(1)
      } else {
        this.queryParams.bizType = 14
        this.bizTypeChange(14)
      }
    },
    bizTypeChange(val) {
      this.queryParams.bizType = val
      if (val == 2) {
        this.queryLabel = '处置时间'
      }
      if (val == 4) {
        this.queryLabel = '维修时间'
      }
      if (val == 5) {
        this.queryLabel = '保养时间'
      }
      if (val == 6) {
        this.queryLabel = '保险时间'
      }
      if (val == 7) {
        this.queryLabel = '年检时间'
      }
      if (val == 8) {
        this.queryLabel = '违章时间'
      }
      if (val == 16) {
        this.queryLabel = '支出时间'
      }
      this.itemflag()
      let bizNoIndex = this.bizNoArray.findIndex((item) => item == val)
      if (bizNoIndex != -1) {
        this.bizNoFlag = true
      }
      let memberNameIndex = this.memberNameArrray.findIndex(
        (item) => item == val
      )
      if (memberNameIndex != -1) {
        this.memberNameFlag = true
      }
      let payWayIndex = this.payWayArrray.findIndex((item) => item == val)
      if (payWayIndex != -1) {
        this.payWayFlag = true
      }
      let createByIndex = this.createByArrray.findIndex((item) => item == val)
      if (createByIndex != -1) {
        this.createByFlag = true
      }
      let carNoIndex = this.carNoArrray.findIndex((item) => item == val)
      if (carNoIndex != -1) {
        this.carNoFlag = true
      }
      let timeIndex = this.timeArrray.findIndex((item) => item == val)
      if (timeIndex != -1) {
        this.timeFlag = true
      }
      let manageReasonIndex = this.manageReasonArrray.findIndex(
        (item) => item == val
      )
      if (manageReasonIndex != -1) {
        this.manageReasonFlag = true
      }
      let jobNameIndex = this.jobNameArrray.findIndex((item) => item == val)
      if (jobNameIndex != -1) {
        this.jobNameFlag = true
      }
      let reimbursementMatterIndex = this.reimbursementMatterArrray.findIndex(
        (item) => item == val
      )
      if (reimbursementMatterIndex != -1) {
        this.reimbursementMatterFlag = true
      }
      let reimbursementTypeIndex = this.reimbursementTypeArrray.findIndex(
        (item) => item == val
      )
      if (reimbursementTypeIndex != -1) {
        this.reimbursementTypeFlag = true
      }
      let orderSourceIndex = this.orderSourceArrray.findIndex(
        (item) => item == val
      )
      if (orderSourceIndex != -1) {
        this.orderSourceFlag = true
      }
      this.resetQuery()
    },
    itemflag() {
      this.orderSourceFlag = false
      this.reimbursementTypeFlag = false
      this.reimbursementMatterFlag = false
      this.jobNameFlag = false
      this.manageReasonFlag = false
      this.timeFlag = false
      this.carNoFlag = false
      this.createByFlag = false
      this.payWayFlag = false
      this.memberNameFlag = false
      this.bizNoFlag = false
    },
    /** 查询业务入账/出账流水列表 */
    getList() {
      this.getBillFlowCount()
      this.loading = true
      listFlow(this.queryParams).then((response) => {
        this.flowList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        flowType: null,
        bizNo: null,
        bizType: null,
        flowNo: null,
        amount: null,
        payTime: null,
        payWay: null,
        deptId: null,
        tenantId: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      if (this.queryParams.time) {
        this.queryParams.startTime = this.parseTime(
          this.queryParams.time[0],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
        this.queryParams.endTime = this.parseTime(
          this.queryParams.time[1],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
      }
      if (this.queryParams.billTime) {
        this.queryParams.startBillTime = this.parseTime(
          this.queryParams.billTime[0],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
        this.queryParams.endBillTime = this.parseTime(
          this.queryParams.billTime[1],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
      }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.time = ''
      this.queryParams.billTime = ''
      this.queryParams.startTime = null
      this.queryParams.startBillTime = null
      this.queryParams.endBillTime = null
      this.queryParams.endTime = null
      this.handleQuery()
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$modal
        .confirm('是否确认导出所有业务入账/出账流水数据项？')
        .then(() => {
          this.exportLoading = true
          return exportFlow(queryParams)
        })
        .then((response) => {
          this.$download.name(response.msg)
          this.exportLoading = false
        })
        .catch(() => {
        })
    },
    //过滤字典
    filterDict(val) {
      return (
        val == 1 ||
        val == 2 ||
        val == 3
      )

    },
  },
}
</script>
